import { useEffect, useState } from "react";
import "./top.scss";
import { Button } from "react-vant";
import { VideoO, BalanceO, UserO, WapHomeO } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";
export default function Top() {
    const [user, setUser] = useState({});
    const navigate = useNavigate()
    const [tip, setTip] = useState("早上好");
    const [nickName, settnickName] = useState('')

    useEffect(() => {
        // setUser(JSON.parse(localStorage.getItem("user")));
        // 判断当前时间 并修改tip的值
        if (new Date().getHours() < 12) {
            setTip("早上好");
        } else if (new Date().getHours() < 18) {
            setTip("下午好");
        } else {
            setTip("晚上好");
        }
    }, []);

    useEffect(() => {
        const userInfo = JSON.parse(localStorage.getItem('user'));
        settnickName(userInfo.note.realName);
    }, []);
    const handelcreate = ()=>{
        localStorage.newCreate = 'true'
        navigate('/upload')
    }
    return (
        <div className="home-wrapper">
            <div className="home-top">{tip},{nickName}</div>
            <div className="home-video">
                <Button icon={<VideoO />} iconPosition="left" type="warning" onClick={handelcreate}>
                    创建新课程
                </Button>
            </div>
            <div className="home-mas">
                <div>
                    <BalanceO />
                    <p>总收入</p>
                    <p style={{ color: "#A5CC8F" }}>￥868,2</p>
                    <img
                        src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/vector_1_u1946.svg"
                        alt=""
                    />
                </div>
                <div>
                    <UserO />
                    <p>总收入</p>
                    <p style={{ color: "#A5CC8F" }}>4,8/5</p>
                    <img
                        src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/vector_1_u1946.svg"
                        alt=""
                    />
                </div>
                <div>
                    <WapHomeO />
                    <p>学生总数</p>
                    <p style={{ color: "#FDCB9E" }}>5622</p>
                    <img
                        src="https://cdn7.axureshop.com/demo2023/2246171/images/01-%E4%BB%AA%E8%A1%A8%E7%9B%98/vector_3_u1962.svg"
                        alt=""
                    />
                </div>
            </div>
        </div>
    );
}
